<template>
    <view class="container p-20">
        <view class="container__header">
            <uv-navbar :placeholder="true" bgColor="transparent"></uv-navbar>
            <view class="flex items-center mb-40">
                <view>
                    <uv-image src="/static/logo.png" shape="circle" height="60" width="60"></uv-image>
                </view>
                <view class="ml-20">
                    <view class=" fw-600 fs-32">
                        点击登录
                    </view>
                    <view class="fs-24">
                        登录以后，更巴适！
                    </view>
                </view>
            </view>
        </view>
        <view class="container__ad rounded-20 mb-20 overflow-hidden p-30 flex items-center justify-between">
            <view>
                <view class="fs-32 fw-600"> 心之翎VIP会员</view>
                <view class="fs-22 pt-30">点亮会员标志，享更多福利特权</view>
            </view>
            <view>
                <uv-button text="立即开通" :customStyle="{borderRadius:'50rpx',color:'#666370'}" color="#fff"></uv-button>
            </view>
        </view>
        <view class="container__bar rounded-20 mb-20 overflow-hidden py-40 bgc-ffffff">
            <view class="fs-22 flex flex-col items-center" @click="toPage(1)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">我的课程</view>
            </view>
            <view class="fs-22 flex flex-col items-center" @click="toPage(2)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">测评报告</view>
            </view>
            <view class="fs-22 flex flex-col items-center" @click="toPage(3)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">我的活动</view>
            </view>
            <view class="fs-22 flex flex-col items-center" @click="toPage(4)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">咨询订单</view>
            </view>
            <view class="fs-22 flex flex-col items-center" @click="toPage(5)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">每日签到</view>
            </view>
            <view class="fs-22 flex flex-col items-center" @click="toPage(6)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">我的收藏</view>
            </view>
            <view class="fs-22 flex flex-col items-center" @click="toPage(7)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">评论回复</view>
            </view>
            <view class="fs-22 flex flex-col items-center" @click="toPage(8)">
                <view class="rounded bgc-cccccc w-60 h-60 flex justify-center items-center">
                    <uv-icon name="heart" size="25"></uv-icon>
                </view>
                <view class="mt-8">我的积分</view>
            </view>
        </view>
        <view class="container__list rounded-20 overflow-hidden px-40 bgc-ffffff">
            <uv-list padding="30rpx 0rpx">

                <uv-list-item :border="true" :show-extra-icon="true" :extra-icon="{icon:'account',size:28}"
                    title="账户与安全" clickable :show-arrow="true"></uv-list-item>
                <uv-list-item :border="true" note="心理咨询师、机构、企业认证" :show-extra-icon="true"
                    :extra-icon="{icon:'coupon',size:28}" title="入驻认证" clickable :show-arrow="true"></uv-list-item>
                <uv-list-item :border="true" :show-extra-icon="true" :extra-icon="{icon:'empty-order',size:28}"
                    title="银翎汇介绍" clickable :show-arrow="true"></uv-list-item>
                <uv-list-item :border="true" :show-extra-icon="true" :extra-icon="{icon:'weixin-fill',size:28}"
                    title="关注公众号" clickable :show-arrow="true"></uv-list-item>

                <uv-list-item :border="true" :show-extra-icon="true" :extra-icon="{icon:'phone',size:28}" title="客服电话"
                    clickable :show-arrow="true"></uv-list-item>
                <uv-list-item :border="true" :show-extra-icon="true" :extra-icon="{icon:'email',size:28}" title="意见反馈"
                    clickable :show-arrow="true"></uv-list-item>
            </uv-list>
        </view>
    </view>
    <!-- <TabBar @tab-bar-height-ready="onTabBarHeightReady" /> -->
</template>
<style scoped lang="scss">
    .container {
        min-height: 100vh;
        background: linear-gradient(to bottom, #c29bfc, #f1f3ff);

        &__ad {
            background: linear-gradient(to right, #7f72e3, #ca76ff);
            color: #fff;
        }

        &__bar {
            display: grid;
            grid-template-columns: repeat(4, calc(25% - 10rpx));
            gap: 30rpx 10rpx
        }
    }
</style>
<script lang="ts" setup>
    import { ref } from "vue";
    import TabBar from "@/components/TabBar.vue";
    let tabBarHeight = ref(0);
    const onTabBarHeightReady = (height : any) => {
        tabBarHeight.value = height;
    }
    const toPage = (index : any) => {
        if (index === 1) {
            uni.navigateTo({
                url: "/pages/my/course"
            })
        }
        if (index === 2) {
            uni.navigateTo({
                url: "/pages/my/test"
            })
        }
        if (index === 3) {
            uni.navigateTo({
                url: "/pages/active/index"
            })
        }
        if (index === 5) {
            uni.navigateTo({
                url: "/pages/active/sign"
            })
        }
    }
</script>